<template>
    <el-button style="position:relative" type="primary" icon="Download"> <input style="width: 100%; height: 100%;"
            type="file" multiple class="file-btn" @change="setImage" />{{ title }}</el-button>
</template>
<script setup>
import { defineEmits } from 'vue'
import { importExcel } from '@/utils/excel';
const props = defineProps({
    title: {
        type: String,
        default: '导入报表'
    },
})
const emit = defineEmits(["onImportExcelForm"])
function setImage(e) {
    var reader = new FileReader();
    reader.onload = async function (evt) {
        let data = await importExcel(this.result)
        let arr = []
        const uniqueArr = [...new Set(data[0])].filter(item => item)

        let header = data[1]
        for (let index = 2; index < data.length; index++) {
            const item = data[index];
            let obj = {}
            uniqueArr.map(item => {
                obj[item] = {}
            })
            let body = obj
            for (let indexs = 1; indexs < item.length; indexs++) {
                let num = uniqueArr.indexOf(data[0][indexs])
                let title = Object.keys(body)[num]
                const items = item[indexs];
                body[title][header[indexs]] = items
            }
            arr.push(body)
        }
        emit('onImportExcelForm', arr)
        e.target.value = '';
    };
    reader.readAsArrayBuffer(e.target.files[0]);
}
</script>

<style lang="scss" scoped>
.file-btn {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    outline: none;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
</style>